<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本月安装数量</title>
    <script src="./js/package/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 420px;height:230px;background-color: #1e1439;"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
                formatter: (params) =>{
                    //console.log(params[0].name,params[0].value);
                    return '日期：'+params[0].name+'<br>安装：'+params[0].value+'台'
                },
                textStyle:{
                    color:'#ddaf25'
                },
                // extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
                backgroundColor:'rgba(7,2,24,0.8)',
                borderWidth:0,
                extraCssText: 'height:40px;width:140px;border-radius:25px;padding-top:5px;padding-left:20px;'
            },
            xAxis: {
                type: 'category',
                data: ['1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7','1.8','1.9','1.10','1.11','1.12','1.13','1.14','1.15','1.16','1.17','1.18','1.19','1.20','1.21','1.22','1.23','1.24','1.25','1.26','1.27','1.28','1.29','1.30','1.31'],
                axisPointer: {
                    show: true,
                    type: 'shadow'
                },
                show:false
            },
            yAxis: {
                type: 'value',
                // 分割线
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:['#392968']
                    },
                    //width:35        
                },
                // 刻度线设置
                axisLabel:{
                    color:'#6c3abd',
                    inside:true,
                    margin:-10,
                    formatter: '{value}\n'
                }
            },
            // 上下左右间距
            grid:{
                top:'13%',
                bottom:'13%',
                left:'4%',
                right:'4%'
            },
            series: [
                {
                    data: [10, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901],
                    type: 'line',
                    smooth: true,
                    lineStyle:{
                        // color:"#2db5dd",
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                                { offset: 0, color: '#243d66' },
                                { offset: 0.5, color: '#2d88a5' },
                                { offset: 1, color: '#2cc4e9' }
                        ]),
                        with:10
                    },
                    symbol:'circle', //折线点设置为实心点
                    symbolSize: 8,   //折线点的大小
                    showSymbol :false, //折点显示
                    // 折线拐点标志的样式
                    itemStyle:{
                        color:'#33dcff',
                        shadowColor:'#99c35f',
                        // shadowBlur:20
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    </script>
</body>
</html>